<template>
  <div class="role">
    <dnav :data="['系统设置', '角色管理']" />
    <el-button size="mini" type="primary" @click="isaddrole = true"
      >添加</el-button
    >
    <el-divider content-position="left">角色信息</el-divider>

    <el-table height="500px" :data="rolelist" border style="width: 100%">
      <el-table-column prop="cid" label="id" width="50px"> </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column prop="desc" label="描述"> </el-table-column>

      <el-table-column width="300px" label="操作">
        <template slot-scope="prop">
          <el-button size="mini" type="primary" @click="uprole(prop.row)"
            >修改</el-button
          >
          <el-popconfirm title="确定删除吗？" @confirm="delrole(prop.row.cid)">
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>

          <el-button size="mini" type="warning" @click="disauth(prop.row)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加角色模态框 -->
    <el-dialog title="添加角色" :visible.sync="isaddrole" width="50%">
      <el-form
        ref="addform"
        label-position="left"
        :rules="addrule"
        label-width="80px"
        :model="addform"
      >
        <el-form-item label="角色" prop="role_name">
          <el-input v-model="addform.role_name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="addform.desc"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addrole()">添加</el-button>
          <el-button @click="qxaddrole()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改角色模态框 -->
    <el-dialog title="修改角色" :visible.sync="isuprole" width="50%">
      <el-form
        ref="upform"
        label-position="left"
        :rules="uprule"
        label-width="80px"
        :model="upform"
      >
        <el-form-item label="角色" prop="role_name">
          <el-input v-model="upform.role_name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="upform.desc"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="sureuprole()">修改</el-button>
          <el-button @click="qxuprole()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 权限 -->
    <el-drawer title="权限" :visible.sync="drawer" direction="ltr">
      <el-tree
        ref="tree"
        :data="authlist"
        node-key="id"
        :default-expanded-keys="dek"
        :default-checked-keys="dck"
        show-checkbox
        :props="defaultProps"
      >
      </el-tree>
      <el-button size="mini" type="primary" @click="suredis()"
        >确认分配</el-button
      >
      <el-button size="mini" @click="canceldis()">取消</el-button>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false, // 抽屉 权限
      isaddrole: false, // 添加角色模态框
      isuprole: false, // 修改角色模态框
      cutcid: "", // 当前角色id 作为分配权限参数
      cutrolename: "", // 当前角色
      rolelist: [], // 角色列表
      authlist: [], // 所有权限
      dek: [], // 展开id集合
      dck: [], // 选中id集合
      defaultProps: {
        children: "children",
        label: "name",
      },
      addform: {
        role_name: "",
        desc: "",
      },
      addrule: {
        role_name: [{ required: true, message: "不能为空" }],
        desc: [{ required: true, message: "不能为空" }],
      },
      upform: {
        role_name: "",
        desc: "",
        cid: "",
      },
      uprule: {
        role_name: [{ required: true, message: "不能为空" }],
        desc: [{ required: true, message: "不能为空" }],
      },
    };
  },
  methods: {
    getrole() {
      // 获取角色
      this.$api.Getrole().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.rolelist = res.data.data;
        }
      });
    },
    uprole(v) {
      // 修改角色
      this.isuprole = true;
      this.upform.role_name = v.role_name;
      this.upform.desc = v.desc;
      this.upform.cid = v.cid;
      console.log(this.upform);
    },
    delrole(cid) {
      // 删除角色
      this.$api.Delrole({ cid }).then((res) => {
        if (res.data.code == 200) {
          this.getrole();
        }
      });
    },
    addrole() {
      // 添加角色
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.$api.Addrole(this.addform).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$refs.addform.resetFields();
              this.getrole();
              this.isaddrole = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    qxaddrole() {
      // 取消添加角色
      this.$refs.addform.resetFields();
      this.isaddrole = false;
    },
    sureuprole() {
      // 确定修改角色
      this.$refs.upform.validate((valid) => {
        if (valid) {
          this.$api.Uprole(this.upform).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$refs.upform.resetFields();
              this.getrole();
              this.isuprole = false;
            } else {
              this.$message({
                type: "info",
                message: res.data.msg,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    getallauth() {
      //获取所有权限
      this.$api.Allauth({ type: "tree" }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.authlist = res.data.data;
        }
      });
    },
    disauth(v) {
      //分配权限
      this.cutcid = v.cid;
      this.dek = [];
      this.dck = [];
      console.log(v);
      this.drawer = true;
      //展开要一级id的集合 选中 要第二级id的集合
      //v.children  每个角色的权限
      v.children.map((i, j) => {
        //第一层 第一级 收集 dek
        this.dek.push(i.id);
        //第二层 选中的
        i.children.map((m, n) => {
          this.dck.push(m.id);
        });
      });
      console.log(this.dek);
      this.getallauth();
    },
    suredis() {
      //确认分配
      console.log(this.cutcid); //当前角色id
      //rid选中的权限
      console.log(this.$refs.tree.getCheckedKeys());
      let rid = this.$refs.tree.getCheckedKeys().join(",");
      console.log(rid);
      this.$api.Disauth({ rid, cid: this.cutcid }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.drawer = false;
          this.getrole();
        } else {
          this.$message({
            type: "info",
            message: res.data.msg,
          });
        }
      });
    },
    canceldis() {
      //取消
      this.drawer = false;
    },
  },
  mounted() {
    this.getrole();
    this.getallauth();
  },
};
</script>

<style>
</style>